<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        height: 3000px;
    }
</style>
<body>

<script>

    // 鼠标事件对象 MouseEvent
    // PointerEvent 接口继承了所有 MouseEvent 中的属性，
    //  以保障原有为鼠标事件所开发的内容能更加有效的迁移到指针事件。
    document.addEventListener('click', function (e) {
        console.log(e)
        // clientX | clientY 返回鼠标相对于浏览器窗口可视区的 X | Y 坐标
        //  浏览器窗口可视区 --> (当窗口半屏, 或有调试窗口, 可视区都发生变化)
        //      当浏览器发生滚动时, 坐标还是不会变的
        console.log(`e.clientX: ${e.clientX}, e.clientY: ${e.clientY}`)

        // pageX | pageY 返回相对于文档页面的 X | Y 坐标 IE9+ 支持
        //      当浏览器发生滚动时, 坐标是变化的
        console.log(`e.pageX: ${e.pageX}, e.pageY: ${e.pageY}`)

        // screenX | screenX 返回鼠标相对于电脑屏幕的 X | Y 坐标
        console.log(`e.screenX: ${e.screenX}, e.screenY: ${e.screenY}`)
    })
</script>

</body>
</html>
